<template>
  <div>
    <div>
      <div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="flex">
        <h1>订单管理</h1>
      </div>
      <!-- 订单类型&订单状态 -->
      <div class="flex" style="padding: 30px">
        <aside>
          <span>订单类型:</span>
          <el-select
            v-model="value"
            placeholder="请选择订单类型"
            @change="change(value)"
            style="margin-left: 20px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </aside>
        <section style="margin-left: 50px">
          <span>订单状态:</span>
          <el-select
            v-model="value"
            placeholder="请选择订单状态"
            @change="change(value)"
            style="margin-left: 20px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </section>
      </div>

      <!-- 订单日期 -->
      <div class="flex" style="padding: 30px">
        <span>下单日期:</span>
        <el-select
          v-model="value"
          placeholder="请选择订单日期"
          @change="change(value)"
          style="margin-left: 20px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span>今日</span>
        <span>昨日</span>
        <span>最近7天</span>
        <span>最近30天</span>
      </div>

      <!-- 配送方式&付款方式 -->
      <div class="flex" style="padding: 30px">
        <aside>
          <span>配送方式:</span>
          <el-select
            v-model="value"
            placeholder="请选择配送方式"
            @change="change(value)"
            style="margin-left: 20px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </aside>

        <section style="margin-left: 50px">
          <span>付款方式:</span>
          <el-select
            v-model="value"
            placeholder="请选择付款方式"
            @change="change(value)"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </section>
      </div>
    </div>

    <div>
      <div class="navflex">
        <h1>订单列表</h1>
        <el-button>批量操作</el-button>
      </div>
      <!-- 订单列表 -->
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="1">全部订单</el-menu-item>
        <el-menu-item index="2">待处理</el-menu-item>
        <el-menu-item index="3">代发货</el-menu-item>
        <el-menu-item index="4">已完成</el-menu-item>
      </el-menu>
      <!-- 表单 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed prop="goodsTitle" label="商品名称" width="150">
        </el-table-column>
        <el-table-column prop="price" label="商品价格" width="120">
        </el-table-column>
        <el-table-column prop="goodsNum" label="商品数量" width="120">
        </el-table-column>
        <el-table-column prop="address" label="收货地址" width="120">
        </el-table-column>
        <el-table-column prop="receiver" label="收货人" width="120">
        </el-table-column>
        <el-table-column prop="telephone" label="收货电话" width="120">
        </el-table-column>
        <el-table-column prop="status" label="商品状态" width="120">
        </el-table-column>
        
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>

import { getAllorders } from '@/services/orderService';

export default {
  data() {
    return {
      value: "",
      options: [
        {
          value: "已下单",
          label: "已下单",
        },
        {
          value: "待付款",
          label: "待付款",
        },
        {
          value: "已付款",
          label: "已付款",
        },
      ],
      tableData:[],
      date:[],
    };
  },
  methods: {
    change(val) {
      console.log(val);
    },

  },
  async created() {
    let resp = await getAllorders()
    console.log(resp)
    if(resp){
      // 获取数据库中的订单信息
      this.tableData = resp
      // 获取所有下单时间
      this.date = resp.map(item => item.date)
      console.log(this.date)
    }
  }
};
</script>

<style scoped>
.flex {
  display: flex;
  align-items: center;
}
span {
  padding: 0 20px;
}
.navflex {
  display: flex;
  justify-content: space-between;
  margin: 0 20px;
}
</style>